<template>
  <div class="content-wraper">
    <el-row class="content">
      <el-col :span="6" class="content-left">
        <div class="btns">
          <el-button
            type="primary"
            @click="addClassify('same')"
          >隐患分类编辑</el-button>
          <el-button
            type="primary"
            @click="delClassify"
          >隐患分类删除</el-button>
        </div>
        <tree-box
          v-model="selectedNode"
          :no-search="true"
          :data="data"
          title="隐患分类"
        />
      </el-col>
      <el-col :span="18" class="content-right">
        <div class="btns">
          <el-button
            type="success"
            icon="el-icon-plus"
            @click="add"
          >新增</el-button>
          <el-button
            type="success"
            @click="handleDownload()"
          >导出数据</el-button>
          <!-- <el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button> -->
          <!-- <el-checkbox v-model="checked" style="margin-left: 10px;">显示禁用机构</el-checkbox> -->
        </div>
        <div class="detail">
          <com-table
            :data="dataList"
            :columns="columns"
            :total="total"
            @pageChange="pageChange"
          >
            <template v-slot:level="{ row: { level } }">
              {{ getLevel(level) }}
            </template>
            <template v-slot:option="{ row }">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(row)"
              >编辑</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="del(row)"
              >删除</el-button>
            </template>
          </com-table>
        </div>
      </el-col>
    </el-row>

    <!-- <el-dialog
      :title="optType === 'add' ? '新增人员' : '编辑人员'"
      :visible.sync="modalVisibile"
      width="700px"
      center
    >
      <div>所属机构：{{ selectedNode && selectedNode.name }}</div>
      <add-user ref="form" :data="editData" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="modalVisibile = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog> -->
    <addHiddenDangerStore
      :data="editData"
      :show-modal.sync="showModal"
      :opt-type="optType"
      :relate-data="selectedNode"
      @freshList="getDataList"
    />
    <!-- <addHiddenDangerClassify
      :show-modal.sync="showTypeModal"
      :opt-type="optType"
      :add-level="addLevel"
      :relate-data="selectedNode"
      :data="unitDetail"
      @freshList="initTree"
    /> -->
    <addHiddenDangerType
      :show-modal.sync="showTypeModal"
      :tree-data="data"
      @freshTree="initTree"
    />
  </div>
</template>

<script>
import addHiddenDangerStore from './addHiddenDangerStore.vue'
// import addHiddenDangerClassify from './addHiddenDangerClassify'
import addHiddenDangerType from './addHiddenDangerType.vue'
import moment from 'moment'

import {
  getSecurityRiskCategoryTree,
  getSecurityRiskDbList,
  deleteSecurityRiskDb,
  deleteSecurityRiskCategory,
  exportSecurityRiskDb
} from '@/api/securityManage'
import { dangerLevels } from '@/utils/dicData'
export default {
  name: 'UserManage',
  components: {
    addHiddenDangerStore,
    // addHiddenDangerClassify,
    addHiddenDangerType
  },
  data() {
    return {
      showTypeModal: false,
      addLevel: '',
      unitDetail: {},
      checked: false,
      data: [],
      dataList: [],
      columns: [
        {
          label: '隐患编号',
          prop: 'number'
        },
        {
          label: '隐患等级',
          slot: 'level'
        },
        {
          label: '隐患内容',
          prop: 'content'
        },
        {
          label: '引发事故类型',
          prop: 'type'
        },
        {
          label: '判断依据',
          prop: 'reason'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '180',
          slot: 'option'
        }
      ],
      editData: {},
      filterText: '',
      selectedNode: null,
      showModal: false,
      optType: 'add',
      list: [],
      pageParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
    selectedNode(newValue) {
      this.getDataList()
    }
  },

  mounted() {
    this.initTree()
  },
  methods: {
    /** 导出数据 */
    handleDownload() {
      const { id } = this.selectedNode
      const params = {
        securityRiskCategoryId: id
      }
      exportSecurityRiskDb(params).then(res => {
        const url = window.URL.createObjectURL(new Blob([res]), { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', `安全隐患库${moment(new Date()).format('YYYYMMDDHHmmss')}.xls`)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    delClassify() {
      if (!this.selectedNode) {
        return
      }
      this.$confirm('确定要删除该安全隐患分类吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const { id } = this.selectedNode
          deleteSecurityRiskCategory({
            securityRiskCategoryId: id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initTree()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    },
    addClassify(level) {
      this.addLevel = level
      this.showTypeModal = true
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getLevel(level) {
      const findItem = dangerLevels.filter((item) => item.value === level)[0]
      return findItem ? findItem.name : ''
    },
    getDataList() {
      const { id } = this.selectedNode
      const params = {
        ...this.pageParams,
        securityRiskCategoryId: id
      }
      getSecurityRiskDbList(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    initTree() {
      getSecurityRiskCategoryTree().then((res) => {
        const { nodes } = res.data || {}
        this.data = nodes || []
      })
    },
    add() {
      if (!this.selectedNode) {
        this.$message({
          type: 'error',
          message: '请选择一个隐患分类!'
        })
        return
      }
      this.optType = 'add'
      this.showModal = true
    },
    edit(data) {
      this.optType = 'edit'
      this.editData = data
      this.showModal = true
    },
    del(data) {
      this.$confirm('确定要删除该安全隐患吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteSecurityRiskDb({
            securityRiskDbId: data.id
          }).then((res) => {
            const { code, msg } = res
            if (code === '0001') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getDataList()
            } else {
              this.$message({
                type: 'error',
                message: msg || '删除失败!'
              })
            }
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  .content-left,
  .content-right {
    height: 100%;
  }
  .content-left {
    padding-right: 10px;
    border-right: 1px solid #dedede;
  }
  .content-right {
    padding-left: 10px;
    .detail {
      height: calc(100% - 40px);
      margin-top: 10px;
      overflow: auto;
    }
  }
  .tree {
    height: calc(100% - 40px);
    padding-top: 10px;
  }
}
</style>
